<template>
  <el-drawer title="修改字典" :visible.sync="dialogFormVisible" size="25%">
    <el-form ref="formInline" :inline="true" :model="formInline" :rules="rules" class="form-class" label-position="right" size="small" label-width="100px">
      <el-row>
        <el-col :span="24">
      <el-form-item label="上级地域:" prop="pcode" >
        <el-input v-model="formInline.pcode" :style="{width: '140%'}" placeholder="请输入父级地域代码"></el-input>
      </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
      <el-form-item label="地区名称:" prop="name" >
        <el-input v-model="formInline.name" :style="{width: '140%'}" placeholder="请输入地区名称"></el-input>
      </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
      <el-form-item label="地区编码:" prop="code">
        <el-input v-model="formInline.code" :style="{width: '140%'}" placeholder="请输入地区编码"></el-input>
      </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
      <el-form-item label="拼音:" prop="pinyin">
        <el-input v-model="formInline.pinyin" :style="{width: '140%'}" placeholder="请输入拼音"></el-input>
      </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24"> 
      <el-form-item label="地区层级:" prop="level">
         <el-select :style="{width: '130%'}" v-model="formInline.level" placeholder="请选择活动区域">
          <el-option label="省" :value=1></el-option>
          <el-option label="市" :value=2></el-option>
          <el-option label="区" :value=3></el-option>
          <el-option label="县" :value=4></el-option>
    </el-select>
      </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="首字母:" prop="initials">
        <el-input v-model="formInline.initials" :style="{width: '140%'}" placeholder="请输入首字母"></el-input>
      </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="demo-drawer__footer" style="padding-left: 100px;">
      <el-button @click="resetForm('formInline')">取 消</el-button>
      <el-button type="primary" @click="submitForm('formInline')">修 改</el-button>
    </div>
    <el-divider></el-divider>
    <el-tag style="margin-left:20px;">提醒：未找到合适的解决方案，这里上级地域只能是这样处理。</el-tag>
  </el-drawer>
</template>

<script>
  import { editAreaData } from '@/api/areas'
  import { successMsg } from '@/utils/tools'
  import { getAreasData } from "@/api/areas"
  export default {
    name: 'Insert',
    props:{ /*----接收数据----*/
      areaData:{
        type:Array,
        required:true
      }
    },
    data() {
      let validate_pcode = (rule,value,callback) =>{
        if(value!=1&&this.formInline.pcode==null||this.formInline.pcode==''){
          callback(new Error('非省级单位需指定所属省！'));
        }else{
          callback()
        }
    }
      return {
        dialogFormVisible: false,
        tableData:[],
        expandOnClickNode: true,
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        formInline: {
          id:'',
          name: '',
          code:'',
          pinyin:'',
          level:Number,
          initials:'',
          pcode:[],
        },
        rules:{
          name:[
            { required: true, message: '请输入地域名称', trigger: 'blur' },
          ],
          code:[
            { required: true, message: '请输入地域编码', trigger: 'blur' },
          ],
          pinyin:[
            { required: true, message: '请输入地域拼音', trigger: 'blur' },
          ],
          level:[
            { validator:validate_pcode, trigger: 'change' },
          ],
          initials:[
            { required: true, message: '请输入大写地域简称', trigger: 'blur' },
          ]
        }
      };
    },
    methods:{
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if(valid){
            editAreaData(this.formInline).then(res=>{
              if(res.code===2000) {
                successMsg(res.msg)
                this.$refs[formName].resetFields();
                this.$emit('reloadTable')
                this.dialogFormVisible = false
              }
            })
          }else{
            return false;
          }
        });
      },
      handleNodeClick(node){
        this.formInline.pcode = node.code;
        this.$refs.selectTree.blur();
      },
      formatData(data){
        let option = [];
        data.forEach((item,key) => {
          option.push({label:item.name,value:item.code});
          if(item.children){
            item.children.forEach((items,keys) => {
              option.push({label:items.name,value:items.code});
              if(items.children){
                items.children.forEach((itemss,keyss) => {
                  option.push({label:itemss.name,value:itemss.code});
                  if(itemss.children){
                    itemss.children.forEach((itemsss,keysss) => {
                      option.push({label:itemsss.name,value:itemsss.code});
                    });
                  }
                });
              }
            });
          }
        });
        return option;
      },
      resetForm(formName){
        this.$refs[formName].resetFields();
        this.dialogFormVisible = false
      },
      handleNodeClick(node){
        this.formInline.parent = node.id;
        this.$refs.selectTree.blur();
      }
    }
  }
</script>

<style>
  .main-select-el-tree .el-tree-node .is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
  .main-select-el-tree .el-tree-node.is-current > .el-tree-node__content{font-weight: bold; color: #409eff;}
  .label_padding1{
    padding-left: 50px;
  }
  .label_padding2{
    padding-left: 65px;
  }
  .input_width1{
    width: 150%;
  }
  .input_width2{
    width: 145%;
  }
  .el-cascader-panel{height: 210px;}
  .el-scrollbar__wrap{
    overflow-x: hidden;
  }

</style>
